/**
 * Created by Ysssssss on 2021/4/22.
 */

import React, { PureComponent } from 'react'
import {connect} from "react-redux";
import {withRouter} from "react-router-dom";
import PageBackHeader from "@common/PageBackHeader";
import OrderDetailProductTable from "@common/presentational/OrderDetailProductTable";
import {
    getShoppingMallAfterSalesOrderDetail
} from '@sagas/shoppingMall/shoppingMallOrder'
import {SHOPPING_MALL_REFUND_TYPE} from "@constants/ShoppingMallOrderStatus";
import ShoppingMallAfterSalesOrderPage from "@pages/shoppingMall/ShoppingMallAfterSalesOrderPage";
import ShoppingMallAfterSalesOrderDetailStatus from "@components/shoppingMall/ShoppingMallAfterSalesOrderDetailStatus";
import {getHistoryMatchParams} from "@utils/setUrlQuery";
import {priceFenToYuan} from "@utils/priceConversion";

@connect(({ shoppingMallOrder }) => ({
    afterSalesOrderDetailMap: shoppingMallOrder.afterSalesOrderDetailMap
}), {
    getShoppingMallAfterSalesOrderDetail
})
@withRouter
class ShoppingMallOrderDetailPage extends PureComponent {
    constructor(props) {
        super(props);

        this.columns = [{
            title: '退货数量',
            dataIndex: 'quantity',
            key: 'quantity',
        }, {
            title: '退款金额',
            dataIndex: 'trans',
            key: 'trans',
            render: text => `￥${priceFenToYuan(text)}`
        }, {
            title: '退款原因',
            dataIndex: 'reason',
            key: 'reason',
        }]
    }

    componentDidMount () {
        this.getOrderDetail()
    }

    getOrderDetail () {
        const { applyNumber } = getHistoryMatchParams(this.props)
        this.props.getShoppingMallAfterSalesOrderDetail({ applyNumber })
    }

    goOrderDetailPage (orderNumber) {
        const { history } = this.props
        history.push({
            pathname: `/shopping-mall/order/${orderNumber}/detail`,
            query: history.location.pathname
        })
    }

    render () {
        const { afterSalesOrderDetailMap, history } = this.props
        const { applyNumber } = getHistoryMatchParams(this.props)
        const orderDetail = afterSalesOrderDetailMap[applyNumber] || null
        return orderDetail ? (
            <div className="bilin-web">
                <PageBackHeader title="售后单详情" backUrl={history.location.query || "/shopping-mall/after-sales" }/>
                <div className="bilin-web-body">
                    <div className="shopping-mall-order-detail">
                        <ShoppingMallAfterSalesOrderDetailStatus orderDetail={orderDetail} getOrderDetail={this.getOrderDetail.bind(this)}/>
                        <div className="detail-box flex-row-between flex-vertical-top">
                            <div className="max-w-quarter-2">
                                <div className="ft-clr-d ft-16">退货申请</div>
                                <div className="ft-clr-d mgt-24">
                                    <span>退款金额：</span>
                                    <span className="mgl-4">￥{ priceFenToYuan(orderDetail.amount) }</span>
                                </div>
                                <div className="ft-clr-d mgt-16">
                                    <span>退款类型：</span>
                                    <span className="mgl-4">{ SHOPPING_MALL_REFUND_TYPE[orderDetail.type] }</span>
                                </div>
                                { orderDetail.remark ? (
                                    <div className="ft-clr-d mgt-24">
                                        <span>退款备注：</span>
                                        <span className="mgl-4">{ orderDetail.memo }</span>
                                    </div>
                                ) : null }
                                { orderDetail.contact ? (
                                    <div className="ft-clr-d mgt-24">
                                        <span>申请人：</span>
                                        <span className="mgl-4">{ orderDetail.contact }</span>
                                    </div>
                                ) : null }
                            </div>
                            { orderDetail.platform ? (
                                <div className="max-w-quarter-2">
                                    <div className="ft-clr-d ft-16">退货物流</div>
                                    <div className="ft-clr-d mgt-24">
                                        <span>物流公司：{orderDetail.platform}</span>
                                        <span className="mgl-4"></span>
                                    </div>
                                    <div className="ft-clr-d mgt-24">
                                        <span>物流订单：{orderDetail.platform_order_num}</span>
                                        <span className="mgl-4"></span>
                                    </div>
                                </div>
                            ) : null }
                        </div>
                        <div className="detail-box">
                            <div className="ft-clr-d ft-16">订单信息</div>
                            <div className="mgt-36 mgb-36 flex-row-between flex-vertical-top">
                                <div>
                                    <span>售后单号：</span>
                                    <span className="mgl-4">{ orderDetail.apply_number }</span>
                                </div>
                                <div>
                                    <span>关联订单：</span>
                                    <span className="mgl-4">{ orderDetail.order_number }</span>
                                    <span className="mgl-16 ft-12 clr-green cur-poi"
                                          onClick={this.goOrderDetailPage.bind(this, orderDetail.order_number)}
                                    >查看交易订单</span>
                                </div>
                            </div>
                            <OrderDetailProductTable
                                columns={this.columns}
                                detailList={orderDetail.details || []}
                            />
                        </div>
                    </div>
                </div>
            </div>
        ) : null
    }
}

export default ShoppingMallOrderDetailPage